<template>
  <div class="screen-wrap">
    <div class="opers">
      <el-radio-group
        v-model="screenNum"
        @change="onScreenNumChange"
        style="margin-right:4px"
        size="small"
      >
        <el-radio-button :label="1">单屏</el-radio-button>
        <el-radio-button :label="4">4分屏</el-radio-button>
        <el-radio-button :label="9">9分屏</el-radio-button>
        <el-radio-button :label="16">16分屏</el-radio-button>
        <el-radio-button :label="25">25分屏</el-radio-button>
        <!-- <el-radio-button label="full">全屏</el-radio-button> -->
      </el-radio-group>
      <!-- <el-button size="large" class="ml-10" @click="fullscreenAction">全屏</el-button> -->
    </div>
    <div :class="['screen-video', 'num' + screenNum]" ref="screenVideoRef">
      <div
        class="screen-video-item"
        v-for="(item, index) in screenNum"
        :key="index"
      >
        <livePlayer
          :ref="'livePlayer' + index"
          crossOrigin="anonymous"
          :options="playerOptions[index]"
          v-if="playerOptions[index]"
          :videoParams="videoParams"
        />
        <div class="video-oper" v-if="playerOptions[index]">
          <a
            href="javascript:;"
            class="item scale"
            @click="scaleInAction(index)"
            >放大</a
          >
          <a href="javascript:;" class="item close" @click="closeAction(index)"
            >关闭</a
          >
        </div>
        <h4 class="name" v-if="playerOptions[index]">
          {{ playerOptions[index].videoName }}
        </h4>
      </div>
    </div>
    <div class="screen-full" v-if="scaleVideo">
      <div class="screen-video-item">
        <livePlayer
          ref="scalePlayer"
          crossOrigin="anonymous"
          :options="scaleVideo"
          back
          :videoParams="videoParams"
        />
        <div class="video-oper">
          <a href="javascript:;" class="item close" @click="scaleOutAction"
            >返回</a
          >
        </div>
        <h4 class="name">
          {{ scaleVideo.videoName }}
        </h4>
      </div>
    </div>
  </div>
</template>
<script>
import livePlayer from "./player";
export default {
  name: "screenVideoPlayer",
  components: {
    livePlayer,
  },
  props: {},
  data() {
    return {
      playerOptions: [],
      activePlayIndex: -1,
      screenNum: 25,
      activeIndex: -1,
      scaleVideo: null,
      videoParams:{}
    };
  },
  methods: {
    onScreenNumChange() {
      if (this.screenNum < this.playerOptions.length) {
        this.playerOptions = this.playerOptions.slice(0, this.screenNum);
      }
      this.triggerListChange();
    },
    scaleInAction(index) {
      this.scaleVideo = this.playerOptions[index];
      // this.$nextTick(() => {
      //   this.$refs.scalePlayer.render();
      // });
    },
    scaleOutAction() {
      this.scaleVideo = null;
    },
    closeAction(index) {
      const data = this.playerOptions[index];
      this.showConfirm(`您确定要关闭设备${data.videoName}吗？`, () => {
        this.$emit("getType");
        this.playerOptions.splice(index, 1, "");
        this.triggerListChange();
      });
    },
    triggerListChange() {
      const numberList = [];
      this.playerOptions.forEach((item) => {
        if (item) {
          numberList.push(item.videoNumber);
        }
      });
      this.$emit("listChange", numberList);
    },
    play(videoOptions) {
      let index = 0;
      for (let i = 0; i <= this.playerOptions.length; i++) {
        if (!this.playerOptions[i]) {
          index = i;
          break;
        }
      }
      const typeMap = this.config.videoTypeMap;
      const options = {
        playType: videoOptions.type,
        videoNumber: videoOptions.number,
        videoName: videoOptions.name,
        sources: [
          {
            src: videoOptions.url,
            type: typeMap[videoOptions.type],
          },
        ],
        productId: videoOptions.productId,
      };
      this.videoParams = options;
      this.$set(this.playerOptions, index, options);
      this.activeIndex = index;
      this.$nextTick(() => {
        // this.$refs["livePlayer" + index][0].render();
      });

      this.triggerListChange();
    },
  },
};
</script>
<style lang="less" scoped>
.screen-wrap {
  position: relative;
  .opers {
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-end;
  }
}
.screen-video {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 250px);
  background: rgba(0, 0, 0, 0.6);

  &.num4 .screen-video-item {
    width: 50%;
    height: 50%;
    &:nth-child(2n) {
      border-right: none;
    }
  }
  &.num9 .screen-video-item {
    width: 33.33%;
    height: 33.33%;
    &:nth-child(3n) {
      border-right: none;
    }
  }
  &.num16 .screen-video-item {
    width: 25%;
    height: 25%;
    &:nth-child(4n) {
      border-right: none;
    }
    .name {
      font-size: 10px;
    }
    .video-oper {
      right: 5px;
      .item {
        font-size: 8px;
        height: 12px;
        padding: 0 5px;
        margin-left: 5px;
      }
    }
  }
  &.num25 .screen-video-item {
    width: 20%;
    height: 20%;
    &:nth-child(5n) {
      border-right: none;
    }
    .name {
      font-size: 8px;
    }
    .video-oper {
      right: 5px;
      .item {
        font-size: 8px;
        height: 12px;
        padding: 0 5px;
        margin-left: 5px;
      }
    }
  }
}
.screen-video-item {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  &.active {
    border: 1px solid #0f71e2;
  }
  .name {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 4;
    background: rgba(0, 0, 0, 0.3);
    padding: 0 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    text-align: center;
  }
  .video-oper {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    z-index: 12;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 20px;
      padding: 0 10px;
      margin-left: 10px;
      background: #0f71e2;
      border-radius: 5px;
      color: #fff;
      font-size: 12px;
      &.close {
        background: #f00;
      }
    }
  }
}
.screen-full {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}
</style>
